[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) export const metadata: Metadata = { title: "Pulse Studio | Design for Startups and Scaleups", description: "A design studio specializing in brand identity, UX/UI, and digital experiences for startups and scaleups.", keywords: ["design studio", "startup design", "UX/UI", "brand identity", "web design"], authors: [{ name: "Pulse Studio" }], viewport: "width=device-width, initial-scale=1", themeColor: "#000000", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground: 255, 255, 255; --background: 0, 0, 0; --primary: 149, 76, 233; --primary-light: 169, 96, 253; --border: 255, 255, 255, 0.1; } .dark { --foreground: 255, 255, 255; --background: 0, 0, 0; --primary: 149, 76, 233; --primary-light: 169, 96, 253; --border: 255, 255, 255, 0.1; } body { color: rgb(var(--foreground)); background: rgb(var(--background)); } @layer base { body { @apply bg-background text-foreground antialiased; font-feature-settings: "rlig" 1, "calt" 1; } } @layer components { .purple-glow { filter: drop-shadow(0 0 15px rgba(149, 76, 233, 0.5)); } .haptic-button { @apply inline-flex h-10 items-center justify-center rounded-md border border-white/20 px-6 py-2 text-sm font-medium transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-black; } .haptic-card { @apply border border-white/10 rounded-lg p-6 transition-all hover:border-primary/30; } .pulse-animation { animation: pulse 2s infinite; } } /* Custom animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(149, 76, 233, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(149, 76, 233, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(149, 76, 233, 0); } } .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; } .animate-slide-up { animation: slideUp 0.5s ease-out forwards; } [V0_FILE]typescriptreact:file="app/components/clock.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" interface ClockProps { city: string offset: number } export function Clock({ city, offset }: ClockProps) { const [time, setTime] = useState("") useEffect(() => { const updateTime = () => { const now = new Date() const utc = now.getTime() + now.getTimezoneOffset() * 60000 const cityTime = new Date(utc + 3600000 * offset) const hours = cityTime.getHours().toString().padStart(2, "0") const minutes = cityTime.getMinutes().toString().padStart(2, "0") const seconds = cityTime.getSeconds().toString().padStart(2, "0") setTime(`${hours}:${minutes}:${seconds}`) } updateTime() const interval = setInterval(updateTime, 1000) return () => clearInterval(interval) }, [offset]) return (

{city} {time}

) } [V0_FILE]typescriptreact:file="app/components/feedback-banner.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { AudioWaveformIcon as Waveform } from "lucide-react" export function FeedbackBanner() { const [isHovered, setIsHovered] = useState(false) return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

Haptic Feedback

A strategy session for your company

FREE

) } [V0_FILE]typescriptreact:file="app/components/main-content.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" export function MainContent() { const containerRef = useRef(null) const [isVisible, setIsVisible] = useState(false) useEffect(() => { setIsVisible(true) const handleMouseMove = (e: MouseEvent) => { if (!containerRef.current) return const { clientX, clientY } = e const { left, top, width, height } = containerRef.current.getBoundingClientRect() const x = (clientX - left - width / 2) / 25 const y = (clientY - top - height / 2) / 25 containerRef.current.style.transform = `perspective(1000px) rotateY(${x}deg) rotateX(${-y}deg)` } window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("mousemove", handleMouseMove) } }, []) return (

{/* Left sidebar */}

{["search", "grid", "file", "code", "flame", "search"].map((icon, index) => (

))}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" import { fontFamily } from "tailwindcss/defaultTheme" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-inter)", ...fontFamily.sans], }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="app/components/mobile-menu.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" export function MobileMenu() { const [open, setOpen] = useState(false) return (

setOpen(false)} > Book a call

) } [V0_FILE]typescriptreact:file="app/components/page-transition.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { usePathname } from "next/navigation" export function PageTransition({ children }: { children: React.ReactNode }) { const pathname = usePathname() const [isTransitioning, setIsTransitioning] = useState(false) const [displayChildren, setDisplayChildren] = useState(children) useEffect(() => { if (pathname) { setIsTransitioning(true) const timeout = setTimeout(() => { setDisplayChildren(children) setIsTransitioning(false) }, 500) return () => clearTimeout(timeout) } }, [pathname, children]) return (

{displayChildren}

) } [V0_FILE]typescriptreact:file="app/why/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import type { Metadata } from "next" export const metadata: Metadata = { title: "Why Pulse | Design Studio for Startups", description: "Learn why Pulse Studio is the ideal design partner for startups and scaleups looking to create impactful digital experiences.", } export default function WhyPage() { return (

Why Pulse?

We believe design is more than aesthetics—it's about creating meaningful experiences that resonate with users and drive business growth.

Our approach combines strategic thinking with creative execution, ensuring every project delivers tangible results for startups and scaleups.

With Pulse, you're not just getting designers; you're partnering with strategic thinkers who understand the unique challenges of growing businesses.

← Back to home

) } [V0_FILE]typescriptreact:file="app/work/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import Image from "next/image" import type { Metadata } from "next" export const metadata: Metadata = { title: "Our Work | Pulse Studio", description: "Explore our portfolio of design projects for startups and scaleups, showcasing our expertise in brand identity, UX/UI, and digital experiences.", } interface Project { id: number title: string client: string image: string tags: string[] } export default function WorkPage() { const projects: Project[] = [ { id: 1, title: "Brand Identity", client: "Fintech Startup", image: "/placeholder.svg?height=400&width=600", tags: ["Branding", "Logo Design", "Visual Identity"], }, { id: 2, title: "UX/UI Design", client: "SaaS Platform", image: "/placeholder.svg?height=400&width=600", tags: ["User Experience", "Interface Design", "Prototyping"], }, { id: 3, title: "Website Redesign", client: "E-commerce", image: "/placeholder.svg?height=400&width=600", tags: ["Web Design", "Responsive", "E-commerce"], }, ] return (

Our Work

{projects.map((project, index) => (

{project.title}

{project.client}

{project.tags.map((tag, i) => ( {tag} ))}

))}

← Back to home

) } [V0_FILE]typescriptreact:file="app/what/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import type { Metadata } from "next" export const metadata: Metadata = { title: "What We Do | Pulse Studio", description: "Discover our comprehensive design services including brand strategy, UX/UI design, web development, and product design for startups and scaleups.", } interface Service { title: string description: string icon: string } export default function WhatPage() { const services: Service[] = [ { title: "Brand Strategy", description: "Defining your unique position in the market and creating a cohesive brand identity that resonates with your audience.", icon: "✦", }, { title: "UX/UI Design", description: "Creating intuitive digital experiences that delight users and drive engagement through thoughtful interface design.", icon: "◆", }, { title: "Web Development", description: "Building high-performance websites and applications that deliver exceptional user experiences across all devices.", icon: "◇", }, { title: "Product Design", description: "Crafting user-centered digital products that solve real problems and create value for your business and customers.", icon: "✧", }, ] return (

What We Do

{services.map((service, index) => (

{service.icon}

{service.title}

{service.description}

))}

← Back to home

) } [V0_FILE]typescriptreact:file="app/plans/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Check } from "lucide-react" import type { Metadata } from "next" export const metadata: Metadata = { title: "Pricing Plans | Pulse Studio", description: "Explore our flexible pricing plans for startups and scaleups, from project-based work to ongoing design support and enterprise solutions.", } interface Plan { name: string price: string description: string features: string[] featured?: boolean } export default function PlansPage() { const plans: Plan[] = [ { name: "Project", price: "$5,000", description: "Perfect for specific design needs", features: [ "Brand identity design", "Website design (up to 5 pages)", "One round of revisions", "2 weeks delivery", ], }, { name: "Retainer", price: "$8,000/mo", description: "Ongoing design support for growing teams", features: [ "Unlimited design requests", "UI/UX design", "Website & app design", "Priority support", "Fast turnaround", ], featured: true, }, { name: "Enterprise", price: "Custom", description: "Tailored solutions for larger organizations", features: [ "Dedicated design team", "Strategy workshops", "Design systems", "Custom integrations", "24/7 support", ], }, ] return (

Our Plans

{plans.map((plan, index) => (

{plan.name}

{plan.price}

{plan.description}

Get started

))}

← Back to home

) } [V0_FILE]typescriptreact:file="components/clock.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" interface ClockProps { city: string offset: number } export function Clock({ city, offset }: ClockProps) { const [time, setTime] = useState("") useEffect(() => { const updateTime = () => { const now = new Date() const utc = now.getTime() + now.getTimezoneOffset() * 60000 const cityTime = new Date(utc + 3600000 * offset) const hours = cityTime.getHours().toString().padStart(2, "0") const minutes = cityTime.getMinutes().toString().padStart(2, "0") const seconds = cityTime.getSeconds().toString().padStart(2, "0") setTime(`${hours}:${minutes}:${seconds}`) } // Initial update updateTime() // Update every second const interval = setInterval(updateTime, 1000) return () => clearInterval(interval) }, [offset]) return (

{city} {time}

) } [V0_FILE]typescriptreact:file="components/feedback-banner.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { AudioWaveformIcon } from "lucide-react" import Link from "next/link" export function FeedbackBanner() { const [isHovered, setIsHovered] = useState(false) return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

Pulse Feedback

A strategy session for your company

FREE

) } [V0_FILE]typescriptreact:file="components/mobile-menu.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger, SheetClose } from "@/components/ui/sheet" export function MobileMenu() { const [open, setOpen] = useState(false) const handleLinkClick = () => { setOpen(false) } return (

Book a call

) } [V0_FILE]typescriptreact:file="components/page-transition.tsx" isMerged="true" "use client" import type React from "react" import { usePathname } from "next/navigation" import { AnimatePresence, motion } from "framer-motion" interface PageTransitionProps { children: React.ReactNode } export function PageTransition({ children }: PageTransitionProps) { const pathname = usePathname() return ( {children} ) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import Link from "next/link" import { ContactForm } from "@/components/contact-form" export const metadata: Metadata = { title: "Contact Us | Pulse Studio", description: "Get in touch with Pulse Studio to discuss your design needs and book a free strategy session for your startup or scaleup.", } export default function ContactPage() { return (

Contact Us

Get in touch

Ready to elevate your brand? We're here to help you create exceptional digital experiences that drive growth for your startup or scaleup.

Email

hello@haptic.studio

Location

London & New York

← Back to home

) } [V0_FILE]typescriptreact:file="components/contact-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" export function ContactForm() { const { toast } = useToast() const [isSubmitting, setIsSubmitting] = useState(false) const [formData, setFormData] = useState({ name: "", email: "", company: "", message: "", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission await new Promise((resolve) => setTimeout(resolve, 1500)) toast({ title: "Message sent", description: "We'll get back to you as soon as possible.", }) setFormData({ name: "", email: "", company: "", message: "", }) setIsSubmitting(false) } return (

Name

Company

Message

</div>

<Button type="submit" disabled={isSubmitting} className="w-full bg-primary hover:bg-primary/90 text-white">
        {isSubmitting ? "Sending..." : "Send Message"}
      </Button>
    </form>
  )
}

[V0_FILE]typescriptreact:file="app/feedback/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import Link from "next/link"
import { AudioWaveformIcon } from "lucide-react"

export const metadata: Metadata = {
  title: "Pulse Feedback | Free Strategy Session",
  description:
    "Book a free strategy session with Pulse Studio to discuss your design challenges and explore solutions for your startup or scaleup.",
}

export default function FeedbackPage() {
  return (
    <div className="min-h-screen bg-black text-white p-5 md:p-10 lg:p-16">
      <h1 className="text-4xl md:text-5xl lg:text-6xl font-light mb-4 animate-fade-in">Pulse Feedback</h1>

<div
        className="inline-flex items-center gap-2 px-3 py-1 bg-primary/20 rounded-full text-primary text-sm mb-12 animate-fade-in"
        style={{ animationDelay: "100ms" }}
      >
        <AudioWaveformIcon className="h-4 w-4" />
        <span>Free Strategy Session</span>
      </div>

<div
        className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl animate-fade-in"
        style={{ animationDelay: "200ms" }}
      >
        <div>
          <h2 className="text-2xl font-medium mb-4">What to expect</h2>
          <ul className="space-y-4 text-white/80">
            <li className="flex gap-3">
              <span className="text-primary">01.</span>
              <p>A 45-minute video call with our design strategists</p>
            </li>
            <li className="flex gap-3">
              <span className="text-primary">02.</span>
              <p>Analysis of your current design challenges and opportunities</p>
            </li>
            <li className="flex gap-3">
              <span className="text-primary">03.</span>
              <p>Actionable recommendations you can implement immediately</p>
            </li>
            <li className="flex gap-3">
              <span className="text-primary">04.</span>
              <p>No obligations or sales pressure - just valuable insights</p>
            </li>
          </ul>
        </div>

<div>
          <h2 className="text-2xl font-medium mb-4">Perfect for</h2>
          <ul className="space-y-4 text-white/80">
            <li className="flex gap-3 items-start">
              <span className="text-primary text-xl">✓</span>
              <p>Startups looking to establish a strong brand identity</p>
            </li>
            <li className="flex gap-3 items-start">
              <span className="text-primary text-xl">✓</span>
              <p>Scaleups needing to refine their user experience</p>
            </li>
            <li className="flex gap-3 items-start">
              <span className="text-primary text-xl">✓</span>
              <p>Teams preparing for a product launch or redesign</p>
            </li>
            <li className="flex gap-3 items-start">
              <span className="text-primary text-xl">✓</span>
              <p>Founders seeking expert design guidance</p>
            </li>
          </ul>
        </div>
      </div>

<div className="mt-12 animate-fade-in" style={{ animationDelay: "300ms" }}>
        <Link
          href="/contact"
          className="inline-block bg-primary text-white px-8 py-3 rounded-md hover:bg-primary/90 transition-colors"
        >
          Book your free session
        </Link>
      </div>

<div className="mt-8 animate-fade-in" style={{ animationDelay: "400ms" }}>
        <Link href="/" className="text-white/70 hover:text-white transition-colors">
          ← Back to home
        </Link>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/main-content.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { useInView } from "react-intersection-observer"
import Image from "next/image"
import { ArrowRight, MousePointer, Zap } from "lucide-react"

export function MainContent() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isLoaded, setIsLoaded] = useState(false)
  const [activeProject, setActiveProject] = useState(0)
  const { ref: inViewRef, inView } = useInView({
    threshold: 0.1,
    triggerOnce: true,
  })

const projects = [
    {
      title: "Brand Identity",
      client: "Fintech Platform",
      image: "/placeholder.svg?height=600&width=800",
      color: "#954CE9",
    },
    {
      title: "UX/UI Design",
      client: "Health Tech App",
      image: "/placeholder.svg?height=600&width=800",
      color: "#4C9EE9",
    },
    {
      title: "Web Development",
      client: "E-commerce Solution",
      image: "/placeholder.svg?height=600&width=800",
      color: "#E94C9E",
    },
  ]

// Handle mouse movement for 3D effect
  useEffect(() => {
    if (!containerRef.current) return

const handleMouseMove = (e: MouseEvent) => {
      if (!containerRef.current) return

const { clientX, clientY } = e
      const { left, top, width, height } = containerRef.current.getBoundingClientRect()

// Calculate rotation based on mouse position
      const x = (clientX - left - width / 2) / 25
      const y = (clientY - top - height / 2) / 25

// Apply 3D transform with smooth transition
      containerRef.current.style.transform = `perspective(1000px) rotateY(${x}deg) rotateX(${-y}deg)`
    }

// Reset transform when mouse leaves
    const handleMouseLeave = () => {
      if (!containerRef.current) return
      containerRef.current.style.transform = "perspective(1000px) rotateY(0deg) rotateX(0deg)"
    }

window.addEventListener("mousemove", handleMouseMove)
    document.addEventListener("mouseleave", handleMouseLeave)

// Simulate loading delay
    const timer = setTimeout(() => {
      setIsLoaded(true)
    }, 300)

// Auto-rotate projects
    const projectTimer = setInterval(() => {
      setActiveProject((prev) => (prev + 1) % projects.length)
    }, 5000)

return () => {
      window.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseleave", handleMouseLeave)
      clearTimeout(timer)
      clearInterval(projectTimer)
    }
  }, [projects.length])

// Add touch support for mobile devices
  useEffect(() => {
    const handleTouchStart = (e: TouchEvent) => {
      if (!containerRef.current) return

// Simple touch interaction - just a subtle tilt
      containerRef.current.style.transform = "perspective(1000px) rotateY(2deg) rotateX(-1deg)"

// Reset after a short delay
      setTimeout(() => {
        if (containerRef.current) {
          containerRef.current.style.transform = "perspective(1000px) rotateY(0deg) rotateX(0deg)"
        }
      }, 300)
    }

const element = containerRef.current
    if (element) {
      element.addEventListener("touchstart", handleTouchStart)

return () => {
        element.removeEventListener("touchstart", handleTouchStart)
      }
    }
  }, [isLoaded])

return (
    <div
      ref={(node) => {
        // Assign to both refs
        if (node) {
          containerRef.current = node
          inViewRef(node)
        }
      }}
      className={`relative w-full max-w-4xl aspect-[16/9] md:aspect-video bg-zinc-900 rounded-lg overflow-hidden transition-all duration-500 ${
        inView && isLoaded ? "opacity-100" : "opacity-0"
      }`}
      style={{
        transformStyle: "preserve-3d",
        transform: "perspective(1000px)",
      }}
      aria-label="Interactive design showcase"
    >
      {/* Main content area */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="relative w-full h-full flex items-center justify-center">
          {/* Project showcase */}
          <div className="absolute inset-0 flex items-center justify-center">
            {projects.map((project, index) => (
              <div
                key={index}
                className={`absolute inset-0 flex flex-col transition-all duration-700 ease-in-out ${
                  activeProject === index ? "opacity-100 transform-none" : "opacity-0 translate-x-8"
                }`}
                style={{
                  transitionDelay: activeProject === index ? "0ms" : "0ms",
                  zIndex: activeProject === index ? 10 : 0,
                }}
              >
                <div className="relative w-full h-full">
                  <Image
                    src={project.image || "/placeholder.svg"}
                    alt={`${project.title} for ${project.client}`}
                    fill
                    className="object-cover opacity-40"
                    sizes="(max-width: 1200px) 100vw, 1200px"
                  />

<div className="absolute inset-0 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 text-center">
                    <div
                      className="w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 mb-3 sm:mb-4 md:mb-6 rounded-full flex items-center justify-center purple-glow"
                      style={{ backgroundColor: `${project.color}20`, borderColor: project.color }}
                    >
                      <Zap className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8" style={{ color: project.color }} />
                    </div>
                    <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-1 sm:mb-2">{project.title}</h2>
                    <p className="text-white/70 mb-3 sm:mb-4 md:mb-6 text-sm sm:text-base">{project.client}</p>
                    <button
                      className="flex items-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-sm sm:text-base"
                      style={{ borderColor: project.color }}
                    >
                      <span>View Project</span>
                      <ArrowRight className="w-3 h-3 sm:w-4 sm:h-4" />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>

{/* Project indicators */}
          <div className="absolute bottom-3 sm:bottom-4 md:bottom-6 left-0 right-0 flex justify-center gap-1 sm:gap-2 z-20">
            {projects.map((_, index) => (
              <button
                key={index}
                className={`w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full transition-all ${
                  activeProject === index ? "bg-primary w-4 sm:w-6" : "bg-white/30"
                }`}
                onClick={() => setActiveProject(index)}
                aria-label={`View project ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </div>

{/* Left sidebar */}
      <div
        className="absolute left-0 top-0 bottom-0 w-8 sm:w-10 md:w-12 bg-zinc-950 hidden sm:flex flex-col items-center py-4 gap-6 z-30"
        aria-hidden="true"
      >
        <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center">
          <div className="w-2 h-2 rounded-full bg-primary" />
        </div>

{["search", "grid", "file", "code"].map((_, index) => (
          <div
            key={index}
            className="w-6 h-6 flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity cursor-pointer"
          >
            <div className="w-4 h-4 bg-white/30 rounded-sm" />
          </div>
        ))}
      </div>

{/* Interaction hint */}
      <div className="absolute bottom-4 right-4 md:bottom-6 md:right-6 text-[10px] sm:text-xs text-white/50 flex items-center gap-1 sm:gap-2 z-20">
        <MousePointer className="w-2 h-2 sm:w-3 sm:h-3" />
        <span className="hidden sm:inline">Move mouse to interact</span>
        <span className="sm:hidden">Tap to view</span>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
import Link from "next/link"
import { Clock } from "@/components/clock"
import { FeedbackBanner } from "@/components/feedback-banner"
import { MainContent } from "@/components/main-content"
import { MobileMenu } from "@/components/mobile-menu"

export default function Home() {
  return (
    <div className="min-h-screen bg-black text-white flex flex-col">
      <header className="flex justify-between items-center p-5 md:px-10 lg:px-16">
        <div className="flex items-center">
          <Link href="/" className="text-white font-medium text-xl" aria-label="Pulse Studio Home">
            Pulse<sup className="text-xs">™</sup>
          </Link>
        </div>

<nav className="hidden md:flex space-x-6" aria-label="Main Navigation">
          <Link href="/why" className="text-white/80 hover:text-white transition-colors">
            Why
          </Link>
          <Link href="/work" className="text-white/80 hover:text-white transition-colors">
            Work
          </Link>
          <Link href="/what" className="text-white/80 hover:text-white transition-colors">
            What
          </Link>
          <Link href="/plans" className="text-white/80 hover:text-white transition-colors">
            Plans
          </Link>
        </nav>

<main className="flex-1 flex flex-col items-center justify-center relative px-4 py-8 md:py-12">
        <div className="text-center mb-4 sm:mb-6 md:mb-8 w-full">
          <h2 className="text-xl sm:text-2xl md:text-3xl font-light text-white/80">Our featured work</h2>
          <p className="text-white/60 mt-1 sm:mt-2 text-sm sm:text-base">Explore our latest design projects</p>
        </div>
        <MainContent />

<div className="w-full px-4 sm:px-5 md:px-10 lg:px-16 pb-8 sm:pb-12 md:pb-16 lg:pb-24 mt-8 sm:mt-12 md:mt-auto">
          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-light max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl">
            A design studio for startups and scaleups
          </h1>

About

Tags

Share

More from chinpeerapat

More Templates Like This

About

Tags

Share

About

Tags

Share

More from chinpeerapat

More Templates Like This